<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Finanza - Financial Services Website Template</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">

  <!-- Favicon -->


  <!-- Google Web Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700&family=Open+Sans:wght@400;500&display=swap"
    rel="stylesheet">

  <!-- Icon Font Stylesheet -->
  <link href="css/all.min.css" rel="stylesheet">
  <link href="font/bootstrap-icons.css" rel="stylesheet">

  <!-- Libraries Stylesheet -->
  <link href="lib/animate/animate.min.css" rel="stylesheet">
  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

  <!-- Customized Bootstrap Stylesheet -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Template Stylesheet -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <!-- Spinner Start -->
  <div id="spinner"
    class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
  </div>
  <!-- Spinner End -->


  <!-- Navbar Start -->
  <div class="container-fluid fixed-top px-0 wow fadeIn" data-wow-delay="0.1s">


    <nav class="navbar navbar-expand-lg navbar-light py-lg-0 px-lg-5 wow fadeIn" data-wow-delay="0.1s">
      <a href="index.html" class="navbar-brand ms-4 ms-lg-0">
        <img src="./img/logo.png" width="160">
      </a>
      <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav ms-auto p-4 p-lg-0">
          <a href="index.html" class="nav-item nav-link active">首页</a>
          <a href="about.html" class="nav-item nav-link">关于我们</a>
          <a href="service.html" class="nav-item nav-link">诚邀加盟</a>
          <a href="contact.html" class="nav-item nav-link">联系我们</a>
        </div>
      </div>
    </nav>
  </div>
  <!-- Navbar End -->


  <!-- Page Header Start -->
  <div class="container-fluid page-header mb-5 wow fadeIn" data-wow-delay="0.1s">
    <div class="container">
      <h1 class="display-3 mb-4 animated slideInDown">诚邀加盟</h1>
    </div>
  </div>
  <!-- Page Header End -->


  <!-- Service Start -->
  <div class="container-xxl service py-5">
    <div class="container">
      <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
        <p class="d-inline-block border rounded text-primary fw-semi-bold py-1 px-3">Our Services</p>
        <h1 class="display-5 mb-5">提供完善的加盟服务</h1>
      </div>
      <div class="row g-4 wow fadeInUp" data-wow-delay="0.3s">
        <div class="col-lg-4">
          <div class="nav nav-pills d-flex justify-content-between w-100 h-100 me-4">
            <button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4 active"
              data-bs-toggle="pill" data-bs-target="#tab-pane-1" type="button">
              <h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>免加盟费</h5>
            </button>
            <button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill"
              data-bs-target="#tab-pane-2" type="button">
              <h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>稳定的现金流</h5>
            </button>
            <button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-4" data-bs-toggle="pill"
              data-bs-target="#tab-pane-3" type="button">
              <h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>无需人力设备维护</h5>
            </button>
            <button class="nav-link w-100 d-flex align-items-center text-start border p-4 mb-0" data-bs-toggle="pill"
              data-bs-target="#tab-pane-4" type="button">
              <h5 class="m-0"><i class="fa fa-bars text-primary me-3"></i>实时场地监控</h5>
            </button>
          </div>
        </div>
        <div class="col-lg-8">
          <div class="tab-content w-100">
            <div class="tab-pane fade show active" id="tab-pane-1">
              <div class="row g-4">
                <div class="col-md-6" style="min-height: 350px;">
                  <div class="position-relative h-100">
                    <img class="position-absolute rounded w-100 h-100" src="img/service-1.jpg"
                      style="object-fit: cover;" alt="">
                  </div>
                </div>
                <div class="col-md-6">
                  <h3 class="mb-4">现在加盟，免收取加盟费用！</h3>
                  <p class="mb-4">成都小车飞象环保科技有限公司成立与2020年9月，创始人团队深耕汽车服务行业20余年，有着多年汽车服务、自助服务等相关行业的丰富经验，
                    我司着力于自助洗车行业，借助物联网、大数据等先进技术，赋能传统车辆清洁，我们的宗旨是给人们带来环保、便捷、实惠的洗车服务</p>
                  <p><i class="fa fa-check text-primary me-3"></i>无加盟费</p>
                  <p><i class="fa fa-check text-primary me-3"></i>专家帮选址</p>
                  <p><i class="fa fa-check text-primary me-3"></i>设备无后续费用</p>
                  <a href="" class="btn btn-primary py-3 px-5 mt-3">Read More</a>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="tab-pane-2">
              <div class="row g-4">
                <div class="col-md-6" style="min-height: 350px;">
                  <div class="position-relative h-100">
                    <img class="position-absolute rounded w-100 h-100" src="img/service-2.jpg"
                      style="object-fit: cover;" alt="">
                  </div>
                </div>
                <div class="col-md-6">
                  <h3 class="mb-4">25 Years Of Experience In Financial Support</h3>
                  <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et
                    eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo erat amet.</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Secured Loans</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Credit Facilities</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Cash Advanced</p>
                  <a href="" class="btn btn-primary py-3 px-5 mt-3">Read More</a>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="tab-pane-3">
              <div class="row g-4">
                <div class="col-md-6" style="min-height: 350px;">
                  <div class="position-relative h-100">
                    <img class="position-absolute rounded w-100 h-100" src="img/service-3.jpg"
                      style="object-fit: cover;" alt="">
                  </div>
                </div>
                <div class="col-md-6">
                  <h3 class="mb-4">25 Years Of Experience In Financial Support</h3>
                  <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et
                    eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo erat amet.</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Secured Loans</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Credit Facilities</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Cash Advanced</p>
                  <a href="" class="btn btn-primary py-3 px-5 mt-3">Read More</a>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="tab-pane-4">
              <div class="row g-4">
                <div class="col-md-6" style="min-height: 350px;">
                  <div class="position-relative h-100">
                    <img class="position-absolute rounded w-100 h-100" src="img/service-4.jpg"
                      style="object-fit: cover;" alt="">
                  </div>
                </div>
                <div class="col-md-6">
                  <h3 class="mb-4">25 Years Of Experience In Financial Support</h3>
                  <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et
                    eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo erat amet.</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Secured Loans</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Credit Facilities</p>
                  <p><i class="fa fa-check text-primary me-3"></i>Cash Advanced</p>
                  <a href="" class="btn btn-primary py-3 px-5 mt-3">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Service End -->


  <!-- Callback Start -->
  <div class="container-fluid callback my-5 pt-5">
    <div class="container pt-5">
      <div class="row justify-content-center">
        <div class="col-lg-7">
          <div class="bg-white border rounded p-4 p-sm-5 wow fadeInUp" data-wow-delay="0.5s">
            <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
              <p class="d-inline-block border rounded text-primary fw-semi-bold py-1 px-3">Get In Touch</p>
              <h1 class="display-5 mb-5">填写加盟信息</h1>
            </div>
            <div class="row g-3">
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="text" class="form-control" id="name" placeholder="Your Name">
                  <label for="name">您的姓名</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-floating">
                  <input type="email" class="form-control" id="mail" placeholder="Your Email">
                  <label for="mail">联系方式</label>
                </div>
              </div>
              <div class="col-12">
                <div class="form-floating">
                  <textarea class="form-control" placeholder="Leave a message here" id="message"
                    style="height: 100px"></textarea>
                  <label for="message">留言备注</label>
                </div>
              </div>
              <div class="col-12 text-center">
                <button class="btn btn-primary w-100 py-3" type="submit">联系我们</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Callback End -->


  <!-- Footer Start -->
  <footer class="bg-dark text-light">
    <div class="container pt-4">
      <div class="row">
        <div class="col-md-3 d-flex flex-column justify-content-between align-items-start">
          <div>公司名称：成都小车飞象环保科技有限公司</div>
          <div>地址： 成都高新区玉林西路60号1层</div>
          <div>电话： 13618136572</div>
          <div>邮箱： 453481247@qq.com</div>
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-3">
          <h6>微信公众号</h6>
          <img src="./img/qrcode.png">
        </div>

      </div>
    </div>
    <div class="bg-dark text-center p-3">
      <span class="mb-0">© 2021 成都小车飞象环保科技有限公司. All Rights Reserved.</span>
      <span>备案号：xxxxxxxxxxxxx</span>
      <span>备案地址：xxxxxxx</span>
    </div>
  </footer>
  <!-- Footer End -->


  <!-- Back to Top -->
  <a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>


  <!-- JavaScript Libraries -->
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="lib/wow/wow.min.js"></script>
  <script src="lib/easing/easing.min.js"></script>
  <script src="lib/waypoints/waypoints.min.js"></script>
  <script src="lib/owlcarousel/owl.carousel.min.js"></script>
  <script src="lib/counterup/counterup.min.js"></script>

  <!-- Template Javascript -->
  <script src="js/main.js"></script>
</body>

</html>